<template>
  <div class="matchList-warp">
    <mt-navbar v-model="selected">
      <mt-tab-item v-for="(titles,index) in titleData" :id="index" :key="titles.name">
        <div @click="getList(titles.id)">{{titles.name}}</div>
      </mt-tab-item>
    </mt-navbar>
    <div v-for="obj in listData" :key="obj.name" class="list-wrap bg-fff" @click="goInfo(obj.id)">
      <div style="padding:0.2rem 0.4rem" class="c-flex br-b">
        <div class="pic mr20">
          <img
            :src="'http://img.wangyuhudong.com/'+obj.logo"
            style="width:1.8rem;height:1.8rem;"
            alt
          >
        </div>
        <div class="c-box-flex" style="position: relative">
          <div class="title text-hidden mb20">{{obj.title}}</div>
          <span
            class="stateBtn fs24"
            :style="obj.state==1?'border: 0.02rem solid rgba(255, 184, 25, 1); color: rgba(255, 184, 25, 1);':'border: 0.02rem solid rgba(229, 229, 229, 1); color: rgba(229, 229, 229, 1);'"
          >{{obj.state==1?'进行中':'已结束'}}</span>
          <div
            class="fs20 mt15 mb15"
            style="color:#999;"
            v-show="obj.state != 2"
          >{{obj.start_date}}~{{obj.end_date}}</div>
          <div class="c-flex" style="position: absolute;right:0;bottom:0;width:100%;">
            <div class="c-box-flex">{{obj.organiser}}</div>
            <div>{{obj.cenueCount}}赛点/{{obj.provinceCount}}省</div>
          </div>
        </div>
      </div>
    </div>
    <div class="c-flex c-j-c loading">
      <p v-show="loading" class="page-infinite-loading">
        <mt-spinner type="fading-circle" color="#fff" :size="30"></mt-spinner>加载中...
      </p>
    </div>
    <div class="mask" v-show="loading"></div>
  </div>
</template>
<script>
export default {
  name: "matchList",
  data() {
    return {
      selected: 0,
      titleData: [],
      listData: [],
      addAll: {
        id: "",
        name: "全部"
      },
      loading: false
    };
  },

  mounted() {
    document.title = "赛事中心";
    this.loading = true;
    this.axios
      .get("matches/gameInfo")
      .then(res => {
        var _addall = {};
        this.titleData = res.data.object;
        this.titleData.splice(0, 0, this.addAll);

        
        this.axios
          .get("matches/list")
          .then(res => {
			  this.loading = false;
            this.listData = res.data.object.list;
          })
          .catch(error => console.log(error));
      })
      .catch(error => console.log(error));
  },

  methods: {
    goInfo(id) {
      this.$router.push({
        path: "/matchInfo/?id=" + id
      });
    },
    getList(id) {
      var params = {};
      params.gameId = id;
      this.loading = true;
      this.axios
        .get("matches/list", { params: params })
        .then(res => {
          this.listData = res.data.object.list;
          this.loading = false;
        })
        .catch(error => console.log(error));
    }
  }
};
</script>
<style lang="less">
.loading {
  position: fixed;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 9999;
}

.mask {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.2);
}
.listdetail {
  width: 100%;
  height: 2.3rem;
  display: flex;
  background: rgba(255, 255, 255, 1);
  box-shadow: 0 0.01rem 0.02rem 0 rgba(216, 216, 216, 0.12);

  .left {
    .img {
      width: 1.8rem;
      height: 1.8rem;
      margin: 0.21rem 0.3rem 0.4rem;
    }
  }

  .right {
    flex: 1;

    .title {
      font-size: 0.3rem;
      margin-top: 0.21rem;
    }

    .status {
      width: 1.2rem;
      height: 0.4rem;
      border-radius: 0.2rem;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 0.15rem;

      &.ing {
        border: 0.02rem solid rgba(255, 184, 25, 1);
        color: rgba(255, 184, 25, 1);
      }

      &.end {
        border: 0.02rem solid rgba(229, 229, 229, 1);
        color: rgba(229, 229, 229, 1);
      }
    }

    .date {
      color: #999;
      margin-top: 0.1rem;
    }

    .intro {
      display: flex;
      justify-content: space-between;
      margin-top: 0.2rem;
      color: rgba(153, 153, 153, 1);
      font-size: 0.28rem;
    }
  }
}

.matchList-warp {
  .mint-navbar {
    width: 100%;
    overflow-x: auto;
  }

  .mint-tab-item {
    font-size: 0.28rem;
    padding: 0.3rem 0;
  }

  .mint-tab-item-label {
    font-size: 0.28rem;
    width: 1.6rem;
  }

  .mint-navbar .mint-tab-item.is-selected {
    border-bottom: 3px solid #ffc031;
    color: #ffc031;
    margin-bottom: -0px;
  }

  .stateBtn {
    padding: 0.05rem 0.2rem;
    border-radius: 0.2rem;
  }
}
</style>